<!DOCTYPE html>
<html>

<head>
    <title>服务管理</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/static/js/vue.global.prod.js"></script>
    <style>
        /* 复用现有样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #2c3e50;
            background: linear-gradient(270deg, #f0f4f9 0%, #e3eaf3 100%);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            min-height: calc(100vh - 120px);
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            background: linear-gradient(270deg, #51915f 0%, #3d6d47 100%);
            color: white;
            padding: 1rem;
            box-shadow: 0 5px 8px 8px rgba(0, 0, 0, 0.1);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 1rem;
        }

        .title {
            font-size: 1.5rem;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .version {
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.8);
            font-weight: normal;
        }

        .header-actions {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .header-button {
            padding: 0.625rem 1.25rem;
            background: transparent;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .header-button:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.6);
            transform: translateY(-1px);
        }

        .main-content {
            max-width: 1200px;
            margin: 6rem auto 2rem;
            padding: 0 1rem;
            animation: fadeIn 0.3s ease-out;
        }

        /* 服务卡片样式 */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 1rem;
        }

        .service-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            padding: 1.5rem;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(8px);
        }

        .service-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
        }

        .service-name {
            font-size: 1.25rem;
            color: #51915f;
            margin-bottom: 1rem;
            font-weight: 500;
        }

        .service-status {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 1.5rem;
        }

        .status-running {
            background: rgba(81, 145, 95, 0.1);
            color: #51915f;
        }

        .status-stopped {
            background: rgba(149, 149, 149, 0.1);
            color: #666;
        }

        .status-failed {
            background: rgba(231, 76, 60, 0.1);
            color: #e74c3c;
        }

        .status-padding {
            background: rgb(173 168 17 / 24%);
            color: #b1b501;
        }

        .service-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
        }

        .service-button {
            flex: 1;
            padding: 0.75rem;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .start-button {
            background: linear-gradient(135deg, #51915f 0%, #3d6d47 100%);
            color: white;
        }

        .start-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(81, 145, 95, 0.2);
        }

        .stop-button {
            background: #FFE4E7;
            color: #FF4D6A;
            border: 1px solid #FFD1D9;
        }

        .stop-button:hover {
            background: #FFD1D9;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 77, 106, 0.2);
        }

        .refresh-button {
            background: transparent;
            border: 1px solid #51915f;
            color: #51915f;
        }

        .refresh-button:hover {
            background: rgba(81, 145, 95, 0.1);
        }

        /* 消息提示 */
        .message-container {
            position: fixed;
            top: 5rem;
            left: 0;
            right: 0;
            z-index: 2000;
            display: flex;
            justify-content: center;
            padding: 0.5rem;
            pointer-events: none;
        }

        .message {
            padding: 1rem 1.5rem;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            pointer-events: auto;
            max-width: 90%;
            width: 500px;
            text-align: center;
            animation: slideDown 0.3s ease-out;
            margin: 0 1rem;
            backdrop-filter: blur(8px);
        }

        .success {
            background: rgba(81, 145, 95, 0.95);
            color: white;
            border: 1px solid rgba(81, 145, 95, 0.2);
        }

        .error {
            background: rgba(231, 76, 60, 0.95);
            color: white;
            border: 1px solid rgba(231, 76, 60, 0.2);
        }

        @keyframes slideDown {
            from {
                transform: translateY(-20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* 移动端适配 */
        @media (max-width: 768px) {
            .header {
                padding: 0.75rem 0;
            }

            .header-content {
                padding: 0 1rem;
            }

            .title {
                font-size: 1.25rem;
            }

            .header-actions {
                gap: 0.5rem;
            }

            .header-button {
                padding: 0.5rem 0.75rem;
                font-size: 0.85rem;
            }

            .main-content {
                margin-top: 5rem;
                padding: 0 0.75rem;
            }

            .services-grid {
                grid-template-columns: 1fr;
            }

            .service-card {
                padding: 1rem;
            }
        }

        @media (max-width: 380px) {
            .title {
                font-size: 1.1rem;
            }

            .header-button {
                padding: 0.5rem;
                font-size: 0.8rem;
            }

            .service-name {
                font-size: 1.1rem;
            }
        }

        /* 模态框样式 */
        .modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .modal {
            background: white;
            padding: 2rem;
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            animation: modalAppear 0.3s ease-out;
        }

        @keyframes modalAppear {
            from {
                transform: translateY(20px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal h2 {
            margin: 0 0 1.5rem;
            color: #2c3e50;
            font-size: 1.5rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: #546e7a;
            font-size: 0.9rem;
        }

        .form-group input {
            width: 100%;
            padding: 0.875rem 1rem;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid #dde4e9;
            border-radius: 8px;
            font-size: 1rem;
            color: #2c3e50;
            transition: all 0.2s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #51915f;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(81, 145, 95, 0.1);
        }

        .modal-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }

        .modal-button {
            padding: 0.75rem 1.75rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 500;
            border: none;
            transition: all 0.2s ease;
        }

        .modal-button.primary {
            background: linear-gradient(135deg, #51915f 0%, #3d6d47 100%);
            color: white;
        }

        .modal-button.primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(81, 145, 95, 0.2);
        }

        .modal-button.secondary {
            background: #f0f4f9;
            color: #2c3e50;
        }

        .modal-button.secondary:hover {
            background: #e3eaf3;
        }

        .error-details {
            margin-top: 1rem;
            padding: 1rem;
            background: rgba(231, 76, 60, 0.05);
            border: 1px solid rgba(231, 76, 60, 0.1);
            border-radius: 8px;
            font-size: 0.9rem;
            color: #e74c3c;
        }

        .error-time {
            font-size: 0.8rem;
            color: #666;
            margin-bottom: 0.5rem;
        }

        .dependencies {
            margin-top: 1rem;
            font-size: 0.9rem;
            color: #666;
        }

        .dependency-item {
            display: inline-block;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            padding: 0.25rem 0.75rem;
            background: rgba(81, 145, 95, 0.1);
            border-radius: 4px;
            color: #51915f;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="header">
            <div class="header-content">
                <h1 class="title">服务管理 <span class="version" v-if="version">{{ version }}</span></h1>
                <div class="header-actions">
                    <a href="/config" class="header-button">配置管理</a>
                    <button @click="showChangePasswordModal" class="header-button">修改密码</button>
                    <button @click="logout" class="header-button">退出登录</button>
                </div>
            </div>
        </header>

        <div class="message-container" v-show="message">
            <div :class="['message', messageType]">
                {{ message }}
            </div>
        </div>

        <main class="main-content">
            <div class="services-grid">
                <div v-for="service in Object.values(services)" :key="service.name" class="service-card">
                    <h2 class="service-name">{{ service.description }}</h2>
                    <div style="margin-bottom: 10px;">服务名称：{{ service.name }}</div>
                    <div :class="['service-status', {
                        'status-running': service.status === 1,
                        'status-stopped': service.status === 0,
                        'status-failed': service.status === 2,
                        'status-padding': service.status === 3
                    }]">
                        {{ getStatusText(service.status) }}
                    </div>
                    <div class="service-actions">
                        <button v-if="service.status !== 1" @click="startService(service.name)"
                            class="service-button start-button">
                            启动
                        </button>
                        <button v-if="service.status === 1" @click="stopService(service.name)"
                            class="service-button stop-button">
                            停止
                        </button>
                        <button @click="refreshStatus(service.name)" class="service-button refresh-button">
                            刷新
                        </button>
                    </div>
                    <div v-if="service.error" class="error-details">
                        <div class="error-time">{{ service.error.time }}</div>
                        <div>{{ service.error.message }}</div>
                    </div>
                    <div class="dependencies">
                        依赖：
                        <span v-if="!service.dependencies">(无)</span>
                        <span v-for="dep in service.dependencies" :key="dep" class="dependency-item">{{ dep }}</span>
                    </div>
                </div>
            </div>
        </main>

        <!-- 密码修改模态框 -->
        <div v-if="showPasswordModal" class="modal-backdrop" @click="showPasswordModal = false">
            <div class="modal" @click.stop>
                <h2>修改密码</h2>
                <div class="form-group">
                    <label for="oldPassword">原密码</label>
                    <input type="password" id="oldPassword" v-model="passwordForm.oldPassword" required>
                </div>
                <div class="form-group">
                    <label for="newPassword">新密码</label>
                    <input type="password" id="newPassword" v-model="passwordForm.newPassword" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认新密码</label>
                    <input type="password" id="confirmPassword" v-model="passwordForm.confirmPassword" required>
                </div>
                <div class="modal-buttons">
                    <button class="modal-button secondary" @click="showPasswordModal = false">取消</button>
                    <button class="modal-button primary" @click="changePassword">确认修改</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    services: {},
                    message: '',
                    messageType: 'success',
                    showPasswordModal: false,
                    passwordForm: {
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: ''
                    },
                    version: ''
                }
            },
            methods: {
                getStatusText(status) {
                    switch (status) {
                        case 0: return '已停止';
                        case 1: return '运行中';
                        case 2: return '异常';
                        case 3: return '正在执行...';
                        default: return '未知状态';
                    }
                },
                async loadServices() {
                    try {
                        const response = await fetch('/api/services/list');
                        const data = await response.json();
                        this.services = data;
                    } catch (error) {
                        this.showError('加载服务列表失败：' + error.message);
                    }
                },
                async startService(name) {
                    try {
                        const response = await fetch(`/api/services/${name}/start`, {
                            method: 'POST'
                        });
                        const data = await response.json();
                        if (response.ok) {
                            this.showSuccess(data.message);
                            await this.refreshStatus(name);
                        } else {
                            this.showError(data.error);
                        }
                    } catch (error) {
                        this.showError('启动服务失败：' + error.message);
                    }
                },
                async stopService(name) {
                    try {
                        const response = await fetch(`/api/services/${name}/stop`, {
                            method: 'POST'
                        });
                        const data = await response.json();
                        if (response.ok) {
                            this.showSuccess(data.message);
                            await this.refreshStatus(name);
                        } else {
                            this.showError(data.error);
                        }
                    } catch (error) {
                        this.showError('停止服务失败：' + error.message);
                    }
                },
                async refreshStatus(name) {
                    try {
                        const response = await fetch(`/api/services/${name}/status`);
                        const data = await response.json();
                        if (response.ok) {
                            this.services[name].status = data.status;
                        } else {
                            this.showError(data.error);
                        }
                    } catch (error) {
                        this.showError('刷新状态失败：' + error.message);
                    }
                },
                showSuccess(msg) {
                    this.message = msg;
                    this.messageType = 'success';
                    setTimeout(() => {
                        this.message = '';
                    }, 3000);
                },
                showError(msg) {
                    this.message = msg;
                    this.messageType = 'error';
                    setTimeout(() => {
                        this.message = '';
                    }, 5000);
                },
                async logout() {
                    try {
                        const response = await fetch('/logout', {
                            method: 'POST'
                        });
                        if (response.ok) {
                            window.location.href = '/login';
                        }
                    } catch (error) {
                        this.showError('登出失败：' + error.message);
                    }
                },
                showChangePasswordModal() {
                    this.showPasswordModal = true;
                    this.passwordForm = {
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: ''
                    };
                },

                async changePassword() {
                    if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
                        this.showError('两次输入的新密码不一致');
                        return;
                    }

                    try {
                        const response = await fetch('/api/change-password', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                oldPassword: this.passwordForm.oldPassword,
                                newPassword: this.passwordForm.newPassword
                            })
                        });

                        const data = await response.json();
                        if (response.ok) {
                            this.showSuccess('密码修改成功');
                            this.showPasswordModal = false;
                        } else {
                            this.showError(data.error || '修改失败');
                        }
                    } catch (error) {
                        this.showError('修改密码失败：' + error.message);
                    }
                },
                async fetchVersion() {
                    try {
                        const response = await fetch('/api/version');
                        const data = await response.json();
                        if (data.version) {
                            this.version = 'v' + data.version;
                        }
                    } catch (error) {
                        console.error('获取版本号失败:', error);
                    }
                }
            },
            // 页面显示的生命周期函数
            created() {
                this.fetchVersion();
            },
            mounted() {
                this.loadServices();
                // 每5秒自动刷新一次服务状态
                setInterval(() => {
                    this.loadServices();
                }, 5000);
            }
        }).mount('#app');
    </script>
</body>

</html>